<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>电子看板</title>
    <!-- 禁止缩放（用户无法通过手势或快捷键缩放页面） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="Js_css/webdatarocks.min.css" rel="stylesheet" />
    <!-- <link href="Js_css/theme/dark/webdatarocks.min.css" rel="stylesheet" /> -->
    <!-- <link href="Js_css/theme/green/webdatarocks.min.css" rel="stylesheet" /> -->
    <!-- <link href="Js_css/theme/lightblue/webdatarocks.min.css" rel="stylesheet" /> -->
    <!-- <link href="Js_css/theme/orange/webdatarocks.min.css" rel="stylesheet" /> -->
    <!-- <link href="Js_css/theme/stripedblue/webdatarocks.min.css" rel="stylesheet" /> -->
    <!-- <link href="Js_css/theme/teal/webdatarocks.min.css" rel="stylesheet" /> -->
    <!-- <link href="Js_css/theme/default/webdatarocks.min.css" rel="stylesheet" /> -->
    <script src="Js_css/webdatarocks.toolbar.min.js"></script>
    <script src="Js_css/webdatarocks.js"></script>

    <script src="Js_css/core.js"></script>
    <script src="Js_css/charts.js"></script>
    <script src="Js_css/animated.js"></script>
    <script src="Js_css/webdatarocks.amcharts.js"></script>

</head>

<body>
    <div>
        <style>
            .theme-button {
                display: inline-block;
                width: 80px;
                height: 30px;
                margin: 5px;
                border: none;
                color: white;
                font-size: 12px;
                cursor: pointer;
                border-radius: 5px;
            }

            .dark-theme {
                background-color: #333;
            }

            .green-theme {
                background-color: #4CAF50;
            }

            .lightblue-theme {
                background-color: #ADD8E6;
                color: black;
            }

            .orange-theme {
                background-color: #FFA500;
            }

            .stripedblue-theme {
                background-color: #4682B4;
            }

            .teal-theme {
                background-color: #008080;
            }

            .default-theme {
                background-color: #999999;
            }
        </style>

        <button class="theme-button default-theme" onclick="changeTheme('Js_css/webdatarocks.min.css')">默认主题</button>
        <button class="theme-button dark-theme"
            onclick="changeTheme('Js_css/theme/dark/webdatarocks.min.css')">深色主题</button>
        <button class="theme-button green-theme"
            onclick="changeTheme('Js_css/theme/green/webdatarocks.min.css')">绿色主题</button>
        <button class="theme-button lightblue-theme"
            onclick="changeTheme('Js_css/theme/lightblue/webdatarocks.min.css')">浅蓝主题</button>
        <button class="theme-button orange-theme" onclick="changeTheme('Js_css/theme/orange/webdatarocks.min.css')">橙色主题
            </butto>
            <button class="theme-button stripedblue-theme"
                onclick="changeTheme('Js_css/theme/stripedblue/webdatarocks.min.css')">条纹蓝主题</button>
            <button class="theme-button teal-theme"
                onclick="changeTheme('Js_css/theme/teal/webdatarocks.min.css')">青色主题</button>
    </div>
    <script>
        function changeTheme(themePath) {
            const linkElement = document.querySelector('link[href*="webdatarocks.min.css"]');
            if (linkElement) {
                linkElement.href = themePath;
            }
        }
    </script>
    <div id="pivotContainer"></div>

    <div id="amchartsContainer"></div>
</body>
<script>


      am4core.useTheme(am4themes_animated)
      am4core.options.autoDispose = true;

      let chart;
    
    const pivot = new WebDataRocks({
        container: "#pivotContainer",
        height: 800,
        toolbar: true,
        report: {
          dataSource: {
            filename: "https://cdn.webdatarocks.com/data/data.csv",
          },
          slice: {
            rows: [
             {
                uniqueName: "Country",
             },
            ],
            columns: [
              {
                uniqueName: "Measures",
              },
            ],
            measures: [
              {
                uniqueName: "Price",
                aggregation: "sum",
              },
            ],
          },
        },
        reportcomplete: function() {
          pivot.off("reportcomplete");
          createChart();
        },
        global: {
            localization: {
                "toolbar": {
                    "connect": "连接",
                    "connect_local_csv": "连接本地CSV文件",
                    "connect_local_ocsv": "连接本地OCSV文件",
                    "connect_local_json": "连接本地JSON文件",
                    "connect_remote_csv": "连接远程CSV文件",
                    "connect_remote_csv_mobile": "CSV",
                    "connect_remote_json": "连接远程JSON文件",
                    "connect_remote_json_mobile": "JSON",
                    "open": "打开",
                    "local_report": "本地报表",
                    "remote_report": "远程报表",
                    "remote_report_mobile": "报表",
                    "save": "保存",
                    "save_json": null,
                    "load_json": "JSON报表",
                    "grid": "网格",
                    "grid_flat": "扁平",
                    "grid_classic": "经典",
                    "grid_compact": "简洁",
                    "format": "格式化",
                    "format_cells": "格式化单元格",
                    "format_cells_mobile": "格式化",
                    "conditional_formatting": "条件格式化",
                    "conditional_formatting_mobile": "条件",
                    "options": "选项",
                    "fullscreen": "全屏显示",
                    "minimize": "最小化",
                    "export": "导出",
                    "export_print": "打印",
                    "export_html": "按HTML导出",
                    "export_excel": "按Excel导出",
                    "export_pdf": "按PDF导出",
                    "fields": "字段",
                    "ok": "好",
                    "apply": "应用",
                    "done": "完成",
                    "cancel": "取消",
                    "value": "值",
                    "delete": "删除",
                    "if": "如果",
                    "then": "那么",
                    "open_remote_csv": "打开远程CSV文件",
                    "open_remote_json": "打开远程JSON文件",
                    "csv": "CSV",
                    "open_remote_report": "打开远程报表",
                    "choose_value": "选择值",
                    "text_align": "文字居中",
                    "align_left": "居左",
                    "align_right": "居右",
                    "none": "不设置",
                    "space": "(空格)",
                    "thousand_separator": "千位分隔符",
                    "decimal_separator": "小数分隔符",
                    "decimal_places": "小数位数",
                    "currency_symbol": "货币符号",
                    "currency_align": "货币对齐",
                    "null_value": "空值",
                    "is_percent": "百分比格式",
                    "true_value": "是",
                    "false_value": "否",
                    "conditional": "条件",
                    "add_condition": "增加条件",
                    "less_than": "小于",
                    "less_than_or_equal": "小于等于",
                    "greater_than": "大于",
                    "greater_than_or_equal": "大于等于",
                    "equal_to": "等于",
                    "not_equal_to": "不等于",
                    "between": "介于两者之间",
                    "is_empty": "空值",
                    "all_values": "所有值",
                    "and": "和",
                    "and_symbole": "&",
                    "cp_text": "文本",
                    "cp_highlight": "高亮",
                    "layout_options": "布局项",
                    "layout": "布局",
                    "compact_view": "简洁方式",
                    "classic_view": "经典方式",
                    "flat_view": "扁平方式",
                    "grand_totals": "总计",
                    "grand_totals_off": "不显示总计",
                    "grand_totals_on": "显示总计",
                    "grand_totals_on_rows": "仅在行显示总计",
                    "grand_totals_on_columns": "仅在列显示总计",
                    "subtotals": "小计",
                    "subtotals_off": "不显示小计",
                    "subtotals_on": "显示小计",
                    "subtotals_on_rows": "仅在行显示小计",
                    "subtotals_on_columns": "仅在列显示小计",
                    "choose_page_orientation": "选择页面方向",
                    "landscape": "横向",
                    "portrait": "纵向"
                }, "fieldsList": {
                    "flatHierarchyBox": "选择和重排列",
                    "hierarchyBox": "拖拽大小",
                    "filterBox": "删除并重排报表筛选",
                    "rowBox": "删除并重排行",
                    "columnBox": "删除并重排列",
                    "measureBox": "删除并重排值",
                    "values": "值",
                    "addCalculatedMeasure": "增加计算值",
                    "expandAll": "展开所有",
                    "collapseAll": "折叠所有",
                    "formulasGroupName": "计算后的值",
                    "allFields": "所有字段",
                    "rows": "行",
                    "columns": "列",
                    "filters": "报表筛选",
                    "dropField": "从这里移除字段",
                    "title": "字段",
                    "subtitle": "拖拽和移除字段来重排"
                },
                "filter": {
                    "all": "所有",
                    "multipleItems": "多项",
                    "selectAll": "选择所有",
                    "selectAllResults": "选择所有结果",
                    "top": "顶部",
                    "bottom": "底部",
                    "ascSort": "A-Z升序",
                    "descSort": "Z-A降序",
                    "topX": "前10",
                    "clearTopX": "清除",
                    "measuresPrompt": "选择值",
                    "search": "搜索",
                    "amountSelected": "{1}中已选择{0}项",
                    "amountFound": "{1}中发现{0}项已选择",
                    "sort": "排序:",
                    "addGroup": "增加组",
                    "groupName": "组1",
                    "ungroup": "取消组"
                },
                "drillThrough": {
                    "title": "详情",
                    "row": "行: <b>{0}</b>",
                    "column": "列: <b>{0}</b>",
                    "value": "{0}: <b>{1}</b>"
                },
                "calculatedView": {
                    "title": "已计算值",
                    "measureBox": "拖拽值到公式",
                    "measureName": "值名称",
                    "formula": "公式",
                    "formulaPrompt": "拖拽值并在此编辑公式",
                    "calculateIndividualValues": "计算自定义值",
                    "removeValue": "移除",
                    "removeValueTitle": "移除 {0}?",
                    "removeValueMessage": "您确定要移除该已计算值吗?",
                    "header": "增加已计算值",
                    "allValues": "所有值"
                },
                "grid": {
                    "total": "小计",
                    "totals": "合计",
                    "grandTotal": "总计",
                    "blankMember": "(空)",
                    "dateInvalidCaption": "无效日期",
                    "reportInformation": "报表信息"
                },
                "tooltips": {
                    "row": "行:",
                    "column": "列:",
                    "headerResize": "拖拽调整",
                    "headerFit": "双击适应",
                    "filterIcon": "单击筛选",
                    "filtered": "已筛选",
                    "expandIcon": "单击展开",
                    "collapseIcon": "单击折叠",
                    "drillDown": "单击向下钻取",
                    "drillUp": "单击向上钻取",
                    "sortIcon": "单击降序",
                    "sortedDescIcon": "单击升序",
                    "sortedAscIcon": "单击降序",
                    "close": "单击关闭"
                },
                "aggregations": {
                    "sum": {
                        "caption": "求和",
                        "totalCaption": "{0}求和",
                        "grandTotalCaption": "{0}求和总计"
                    },
                    "count": {
                        "caption": "计数",
                        "totalCaption": "{0}计数",
                        "grandTotalCaption": "{0}计数总计"
                    },
                    "distinctCount": {
                        "caption": "计数(去重)",
                        "totalCaption": "{0}计数(去重)",
                        "grandTotalCaption": "{0}计数(去重)总计"
                    },
                    "difference": {
                        "caption": "差值",
                        "totalCaption": "{0}差值",
                        "grandTotalCaption": "{0}差值总计"
                    },
                    "percentDifference": {
                        "caption": "%差值",
                        "totalCaption": "{0}%差值",
                        "grandTotalCaption": "{0}%差值总计"
                    },
                    "average": {
                        "caption": "平均值",
                        "totalCaption": "{0}平均值",
                        "grandTotalCaption": "{0}平均值总计"
                    },
                    "product": {
                        "caption": "乘积",
                        "totalCaption": "{0}乘积",
                        "grandTotalCaption": "{0}乘积总计"
                    },
                    "min": {
                        "caption": "最小值",
                        "totalCaption": "{0}最小值",
                        "grandTotalCaption": "{0}最小值总计"
                    },
                    "max": {
                        "caption": "最大值",
                        "totalCaption": "{0}最大值",
                        "grandTotalCaption": "{0}最大值总计"
                    },
                    "percent": {
                        "caption": "总计(%)",
                        "totalCaption": "{0}总计(%)",
                        "grandTotalCaption": "{0}总计(%)和"
                    },
                    "percentOfColumn": {
                        "caption": "列(%)",
                        "totalCaption": "{0}列(%)",
                        "grandTotalCaption": "{0}列(%)总计"
                    },
                    "percentOfRow": {
                        "caption": "行(%)",
                        "totalCaption": "{0}行(%)",
                        "grandTotalCaption": "{0}行(%)总计"
                    },
                    "index": {
                        "caption": "指数",
                        "totalCaption": "{0}指数",
                        "grandTotalCaption": "{0}指数总计"
                    },
                    "none": {
                        "caption": "不计算"
                    }
                },
                "messages": {
                    "error": "错误!",
                    "warning": "警告!",
                    "limitation": "有限制!",
                    "browse": "浏览",
                    "confirmation": "确认",
                    "reportFileType": "Flexmonster报表文件",
                    "loading": "正在加载...",
                    "loadingConfiguration": "",
                    "loadingData": "正在加载数据...",
                    "waiting": "响应中请等待{0}秒.",
                    "progress": "{0}K",
                    "progressUnknown": "已加载{0}K",
                    "analyzing": "分析数据中...",
                    "analyzingProgress": "{0} records of {1} ({2}%)",
                    "analyzingRecords": "{0}% 记录",
                    "saving": "保存中...",
                    "loadingDimensions": "维度加载中...",
                    "loadingHierarchies": "层级加载中...",
                    "loadingMeasures": "度量加载中...",
                    "loadingKPIs": "KPI加载中...",
                    "loadingMembers": "成员加载中...",
                    "loadingLevels": "等级加载中...",
                    "loadingProperties": "属性加载中...",
                    "fullscreen": "在全屏模式下打开报表?",
                    "exportComplete": "导出数据已创建,请单击\"保存\"按钮保存数据.",
                    "exportProgress": "导出正在处理中...",
                    "exportError": "导出失败,发生意外错误.",
                    "generatingPDF": "正在生成PDF",
                    "pleaseWait": "请稍等.",
                    "pagesWereGenerated": "页面已生成.",
                    "uploading": "上传中...",
                    "cantSaveFile": "不能保存文件.",
                    "cantSaveToClipboard": "错误:无法写入剪切板.",
                    "saveReportToFile": "报告已准备保存到文件,请单击\"保存\"按钮保存报表.",
                    "loadReportFromFile": "选择报表文件加载.",
                    "inputNewName": "输入新名称",
                    "inputReportName": "输入新报表名称",
                    "invalidDataSource": "无效的数据源或目录.请检查. <br/><br/><u><a href='https://www.flexmonster.com/doc/typical-errors/#invalid-datasource' target='_blank'>阅读关于这个错误的更多信息</a></u>",
                    "dataStreamError": "加载'{0}'时发生数据流错误.<br/><br/><u><a href='https://www.flexmonster.com/doc/typical-errors/#stream-error' target='_blank'>阅读关于这个错误的更多信息</a></u>",
                    "unableToOpenFile": "不能打开文件:{0}.<br/><br/>似乎这个文件不存在或资源中缺少'Access-Control-Allow-Origin'请求头.<br/><br/><u><a href='https://www.flexmonster.com/doc/typical-errors/#unable-to-open-file' target='_blank'>阅读关于这个错误的更多信息</a></u>",
                    "unableTwoFileBrowsingSessions": "浏览文件的面板已打开.",
                    "inappropriateFileFormat": "数据文件格式不匹配.",
                    "invalidJSONdata": "JSON数据无效.",
                    "wrongFormulaFormat": "错误的公式格式,请检查.",
                    "excelCsvChartsExportError": "图表无法导出到Microsoft Excel或CSV.",
                    "excelPdfExportLimitation": "当前版本无法导出到Microsoft Excel或PDF.",
                    "excelExportLimitation": "当前版本无法导出.",
                    "noDataAvailable": "数据源为空,请检查CSV文件.",
                    "saveDataToFile": "数据已准备保存到文件,请单击\"保存\"按钮保存文件.",
                    "dataWasUpdated": "数据源已在服务器上更新。要刷新报表吗?",
                    "ocsvIncompatible": "不能读取数据源.似乎OCSV文件使用新版本压缩过,请更正{0}或更新的版本的组件.",
                    "unknownError": "发生未知错误.",
                    "invalidReportFormat": "无效的报表格式或文件拒绝访问.",
                    "csvHeaderParsingError": "CSV页眉解析错误.",
                    "tooManyColumnsInClassicMode": "经典方式下列太多.请把视图切换到简洁方式.",
                    "cantExpand": "有些字段无法展开.请缩小数据范围.",
                    "cantExpandTitle": "数据集太大."
                },
                "buttons": {
                    "ok": "好",
                    "apply": "应用",
                    "cancel": "取消",
                    "save": "保存",
                    "clear": "清除",
                    "select": "选择",
                    "yes": "是",
                    "no": "否"
                },
                "contextMenu": {
                    "clearSorting": "清除排序",
                    "collapse": "折叠",
                    "drillThrough": "钻取",
                    "expand": "展开",
                    "openFilter": "打开筛选",
                    "sortColumnAsc": "列升序",
                    "sortColumnDesc": "列降序",
                    "sortRowAsc": "行升序",
                    "sortRowDesc": "行降序"
                },
                "date": {
                    "year": "年",
                    "quarter": "季",
                    "month": "月",
                    "day": "天"
                },
                "quarters": {
                    "q1": "一季度",
                    "q2": "二季度",
                    "q3": "三季度",
                    "q4": "四季度"
                },
                "months": {
                    "january": "一月",
                    "february": "二月",
                    "march": "三月",
                    "april": "四月",
                    "may": "五月",
                    "june": "六月",
                    "july": "七月",
                    "august": "八月",
                    "september": "九月",
                    "october": "十月",
                    "november": "十一月",
                    "december": "十二月"
                },
                "monthsShort": {
                    "january": "Jan",
                    "february": "Feb",
                    "march": "Mar",
                    "april": "Apr",
                    "may": "May",
                    "june": "Jun",
                    "july": "Jul",
                    "august": "Aug",
                    "september": "Sep",
                    "october": "Oct",
                    "november": "Nov",
                    "december": "Dec"
                },
                "weekdays": {
                    "first": "周日",
                    "second": "周一",
                    "third": "周二",
                    "fourth": "周三",
                    "fifth": "周四",
                    "sixth": "周五",
                    "seventh": "周六"
                },
                "weekdaysShort": {
                    "first": "Sun",
                    "second": "Mon",
                    "third": "Tue",
                    "fourth": "Wed",
                    "fifth": "Thu",
                    "sixth": "Fri",
                    "seventh": "Sat"
                }
            }
        }
    }); 

    function createChart() {
        pivot.amcharts.getData(
            {},
        drawChart,
        drawChart);
      }

      function drawChart(chartConfig, rawData) {
        chart = am4core.create("amchartsContainer", am4charts.XYChart);
        chart.data = chartConfig.data;
        let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData);
        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        let series = chart.series.push(new am4charts.ColumnSeries());
        series.dataFields.categoryX = pivot.amcharts.getCategoryName(rawData);
        series.dataFields.valueY = pivot.amcharts.getMeasureNameByIndex(rawData, 0);
    }
</script>


</html>